<template>
    <div>
        <Drawer v-model="robotReport" width="1080" @on-close="closeDrawer">
            <Card :bordered="false" dis-hover class="dashboard-console-visit">
                <div slot="title">
                    <Row type="flex" justify="center" align="middle">
                        <Col span="8">
                        <Avatar icon="md-people" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
                        <span class="ivu-pl-8">
                            <span>{{ title1 }}</span>
                            <span>({{ title2 }})</span>
                        </span>
                        </Col>
                        <Col span="16" class="ivu-text-right">
                        <RadioGroup v-model="visitType" type="button" class="ivu-mr-8"
                            @on-change="handleChangeVisitType">
                            <Radio label="day">今</Radio>
                            <Radio label="yesterday">昨</Radio>
                            <Radio label="week">周</Radio>
                            <Radio label="month">月</Radio>
                            <Radio label="year">年</Radio>
                        </RadioGroup>
                        <DatePicker :editable="false" v-model="visitDate" type="daterange" :clearable="false"
                            placement="bottom-end" placeholder="选择日期" style="width: 200px;" @on-change="changeData">
                        </DatePicker>
                        </Col>
                    </Row>
                </div>
                <div>
                    <div class="demo-box">
                        <div class="demo-spin-container" >
                            <div v-if="!loading1" style="overflow: hidden;">
                                <Col :span="24">
                                <span class="ivu-tit">好友信息</span>
                                <div class="ivu-clearfix"></div>
                                <Row :gutter="24" type="flex" justify="center" align="middle" class="ivu-text-center">
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <Numeral :value="numInfo.friend_cnt" />
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        总好友数
                                    </div>
                                    </Col>
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <Numeral :value="numInfo.new_friend" />
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        新增好友
                                    </div>
                                    </Col>
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <span>{{
                                            numInfo.tag_ratio
                                            }}</span>
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        有标签好友比例
                                    </div>
                                    </Col>
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <span>{{
                                            numInfo.remark_ratio
                                            }}</span>
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        有备注好友比例
                                    </div>
                                    </Col>
                                </Row>
                                </Col>
                                <Col :span="24">
                                <span class="ivu-tit">互动信息</span>
                                <Row :gutter="24" type="flex" justify="center" align="middle" class="ivu-text-center">
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <Numeral :value="
                                                        numInfo.interact_friend
                                                    " />
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        互动人数
                                    </div>
                                    </Col>
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <Numeral :value="
                                                        numInfo.message_total
                                                    " />
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        互动条数
                                    </div>
                                    </Col>
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    <div class="dashboard-monitor-base-info-number">
                                        <Numeral :value="
                                                        numInfo.circle_count
                                                    " />
                                    </div>
                                    <div class="dashboard-monitor-base-info-desc">
                                        朋友圈条数
                                    </div>
                                    </Col>
                                    <Col :span="6" class="ivu-mb ivu-mt">
                                    </Col>
                                </Row>
                                </Col>
                                <template>
                                    <Col :span="8" class="ivu-mt">
                                    <span class="ivu-tit">性别分布</span>
                                    <ve-ring width="300px" height="400px" class="ivu-mt-16" :data="genderData">
                                    </ve-ring>
                                    </Col>
                                    <Col :span="8" class="ivu-mt">
                                    <span class="ivu-tit">好友来源分布</span>
                                    <ve-pie width="300px" height="400px" :legend="legend" class="ivu-mt-16"
                                        :data="channelData"></ve-pie>
                                    </Col>
                                    <Col :span="8" class="ivu-mt">
                                    <span class="ivu-tit">地区分布</span>
                                    <ve-pie width="300px" height="400px" class="ivu-mt-16" :data="chartData"></ve-pie>
                                    </Col>
                                </template>
                            </div>
                            <Spin v-else fix></Spin>
                        </div>
                        <div style="flex: 1;" class="ivu-ml-16">
                            <div>
                                <Col :span="20" class="ivu-mt">
                                <span class="ivu-tit">好友活跃排名</span>
                                <Table class="ivu-mt-16 ivu-mb-16" :columns="columns" :data="activeTopData"
                                    :loading="loading2" :height="250"></Table>
                                </Col>
                                <Col :span="20" class="ivu-mt">
                                <span class="ivu-tit">TOP好友标签</span>
                                <Table class="ivu-mt-16 ivu-mb-16" :columns="columns1" :data="tagTopData"
                                    :loading="loading1" :height="250"></Table>
                                </Col>
                                <Col :span="20" class="ivu-mt">
                                <span class="ivu-tit">已删除/拉黑好友</span>
                                <Table class="ivu-mt-16 ivu-mb-16" :columns="columns2" :data="blackData"
                                    :loading="loading2" :height="250"></Table>
                                </Col>
                                <Col :span="20" class="ivu-mt">
                                <span class="ivu-tit">点赞排名</span>
                                <Table class="ivu-mt-16 ivu-mb-16" :columns="columns" :data="circleCommentTopData"
                                    :loading="loading2" :height="250"></Table>
                                </Col>
                                <Col :span="20" class="ivu-mt">
                                <span class="ivu-tit">评论排名</span>
                                <Table class="ivu-mt-16 ivu-mb-16" :columns="columns" :data="circleLikeTopData"
                                    :loading="loading2" :height="250"></Table>
                                </Col>
                            </div>
                        </div>
                    </div>
                </div>
            </Card>
        </Drawer>
    </div>
</template>
<script>
    import dayjs from "dayjs";
    import { getRobotList1, getRobotList2 } from "@/api/TApi/index.js";
    export default {
        // props: ["reportInfo", "wechattime"],
        // created() {

        // },
        data() {
            this.chartSettings = {
                dimension: "地区",
                metrics: "用户量",
            };
            return {
                blackData: [],
                numInfo: {},
                loading1: false,
                loading2: true,
                tagTopData: [],
                legend: {},
                robotReport: false,
                proReadme: false,
                visitType: "week",
                visitDate: [],
                chartData: {},
                channelData: {},
                genderData: {},
                columns: [
                    {
                        title: "名称",
                        key: "nickname",
                    },
                    {
                        title: "活跃度",
                        key: "score",
                    },
                ],
                reportInfo: {},
                columns1: [
                    {
                        title: "名称",
                        key: "tag_name",
                    },
                    {
                        title: "好友数量",
                        key: "value",
                    },
                ],
                columns2: [
                    {
                        title: "名称",
                        key: "nickname",
                    },
                    {
                        title: "删除/拉黑时间",
                        key: "deal_time",
                    },
                ],
                activeTopData: [],
                circleLikeTopData: [],
                circleCommentTopData: [],
                title1: "",
                title2: "",
            };
        },
        computed: {
            // 获取当前周的开始结束时间
            getCurrWeekDays() {
                let date = [];
                let weekOfday = parseInt(dayjs().format("d")); // 计算今天是这周第几天 周日为一周中的第一天
                let start = dayjs()
                    .subtract(weekOfday - 1, "days")
                    .format("YYYY-MM-DD"); // 周一日期
                let end = dayjs()
                    .add(7 - weekOfday, "days")
                    .format("YYYY-MM-DD"); // 周日日期
                date.push(start);
                date.push(end);
                return date;
            },
            // 获取当前月的开始结束时间
            getCurrMonthDays() {
                let date = [];
                const startDate = dayjs()
                    .month(dayjs().month())
                    .startOf("month")
                    .format("YYYY-MM-DD");
                const endDate = dayjs()
                    .month(dayjs().month())
                    .endOf("month")
                    .format("YYYY-MM-DD");
                date.push(startDate);
                date.push(endDate);
                return date;
            },
            // 获取当前月的开始结束时间
            getCurrYear() {
                let date = [];
                const startDate = dayjs()
                    .year(dayjs().year())
                    .startOf("year")
                    .format("YYYY-MM-DD");
                const endDate = dayjs()
                    .year(dayjs().year())
                    .endOf("year")
                    .format("YYYY-MM-DD");
                date.push(startDate);
                date.push(endDate);
                return date;
            },
        },
        methods: {
            _getRobotList1(row) {
                let params = {
                    start: this.formatTime(this.visitDate[0]),
                    end: this.formatTime(this.visitDate[1]),
                    id: row.id,
                };
                this.loading1 = true;
                getRobotList1(params).then((res) => {
                    this.title1 = res.wechatnick;
                    this.title2 = res.wechatno;
                    this.loading1 = false;
                    this.numInfo = Object.freeze({
                        friend_cnt: res.friend_cnt,
                        new_friend: res.new_friend,
                        tag_ratio: (res.tag_ratio * 100).toFixed(2) + "%",
                        remark_ratio: (res.remark_ratio * 100).toFixed(2) + "%",
                        interact_friend: res.interact_friend,
                        message_total: res.message_total,
                        circle_count: res.circle_count,
                    });
                    this.genderData = Object.freeze({
                        columns: ["性别", "用户量"],
                        rows: [
                            { 性别: "男", 用户量: res.gender[1] },
                            { 性别: "女", 用户量: res.gender[2] },
                            { 性别: "未知", 用户量: res.gender[0] },
                        ],
                    });
                    let rows1 = [];
                    let rows2 = [];
                    for (let key in res.city) {
                        rows1.push({
                            城市: key,
                            用户量: res.city[key],
                        });
                    }
                    let legend = [];
                    for (let key in res.source_type) {
                        if (legend.length < 4) {
                            legend.push(key);
                        }
                        rows2.push({
                            来源类型: key,
                            用户量: res.source_type[key],
                        });
                    }
                    this.legend = {
                        data: legend,
                    };
                    this.chartData = Object.freeze({
                        columns: ["城市", "用户量"],
                        rows: rows1,
                    });
                    this.channelData = Object.freeze({
                        columns: ["来源类型", "用户量"],
                        rows: rows2,
                    });
                    let tagTopDataCopy = [];
                    for (let key in res.tags_top) {
                        tagTopDataCopy.push({
                            tag_name: key,
                            value: res.tags_top[key],
                        });
                    }
                    this.tagTopData = Object.freeze(tagTopDataCopy);
                });
            },
            _getRobotList2(row) {
                let params = {
                    start: this.formatTime(this.visitDate[0]),
                    end: this.formatTime(this.visitDate[1]),
                    wechatid: row.wechatid,
                };
                this.loading2 = true;
                getRobotList2(params).then((res) => {
                    this.activeTopData = Object.freeze(res.activeTop);
                    this.circleLikeTopData = Object.freeze(res.circleCommentTop);
                    this.circleCommentTopData = Object.freeze(res.circleLikeTop);
                    this.blackData = Object.freeze(res.blackFriend);
                    this.loading2 = false;
                });
            },
            changeData() {
                // console.log(this.reportInfo)
                if (
                    this.formatTime(this.visitDate[0]) ===
                    this.formatTime(new Date()) &&
                    this.formatTime(this.visitDate[1]) ===
                    this.formatTime(new Date())
                ) {
                    this.visitType = "day";
                } else if (
                    this.formatTime(this.visitDate[0]) ===
                    this.formatTime(new Date() - 86400000 * 1) &&
                    this.formatTime(this.visitDate[1]) ===
                    this.formatTime(new Date() - 86400000 * 1)
                ) {
                    this.visitType = "yesterday";
                } else if (
                    this.formatTime(this.visitDate[0]) ===
                    this.getCurrWeekDays[0] &&
                    this.formatTime(this.visitDate[1]) === this.getCurrWeekDays[1]
                ) {
                    this.visitType = "week";
                } else if (
                    this.formatTime(this.visitDate[0]) ===
                    this.getCurrMonthDays[0] &&
                    this.formatTime(this.visitDate[1]) === this.getCurrMonthDays[1]
                ) {
                    this.visitType = "month";
                } else if (
                    this.formatTime(this.visitDate[0]) === this.getCurrYear[0] &&
                    this.formatTime(this.visitDate[1]) === this.getCurrYear[1]
                ) {
                    this.visitType = "year";
                } else {
                    this.visitType = "";
                }
                // if (!type || type !== "changeTime") {
                this._getRobotList1(this.reportInfo);
                this._getRobotList2(this.reportInfo);
                // }
            },
            formatTime(time) {
                return dayjs(time).format("YYYY-MM-DD");
            },
            closeDrawer() { },
            handleChangeVisitType(val) {
                if (val === "day") {
                    this.visitDate = [new Date(), new Date()];
                } else if (val === "yesterday") {
                    this.visitDate = [
                        new Date() - 86400000 * 1,
                        new Date() - 86400000 * 1,
                    ];
                } else if (val === "month") {
                    this.visitDate = this.getCurrMonthDays;
                } else if (val === "week") {
                    this.visitDate = this.getCurrWeekDays;
                } else if (val === "year") {
                    this.visitDate = this.getCurrYear;
                }
                this._getRobotList1(this.reportInfo);
                this._getRobotList2(this.reportInfo);
            },
            handleRobot(time, row) {
                this.reportInfo = row
                this.robotReport = true;
                this.visitDate = time
                this.visitDate = [
                    dayjs(time[0]).format("YYYY-MM-DD"),
                    dayjs(time[1]).format("YYYY-MM-DD"),
                ];
                this.changeData()
            },
        },
        // watch: {
        //     reportInfo: {
        //         handler(value) {
        //             this.visitType = "week";
        //             this.visitDate = this.getCurrWeekDays;
        //             this._getRobotList1(value);
        //             this._getRobotList2(value);
        //         },
        //         deep: true
        //     }
        // },
        mounted() { },
    };
</script>
<style lang="less">
    .ivu-tit {
        font-weight: bold;
    }

    .dashboard-monitor-base-info-number {
        font-size: 28px;
        font-weight: bold;
        margin: 8px 0 4px;
    }

    .dashboard-monitor-base-info-desc {
        color: #808695;
        font-size: 12px;
    }

    .dashboard-monitor-base-info-extra {
        height: 25px;
        margin-top: 10px;
        font-weight: bold;
        font-size: 14px;

        i {
            transform: scale(1.2);
            margin-right: 4px;
        }

        &-up {
            color: #19be6b;
        }

        &-down {
            color: #ed4014;
        }
    }

    .dashboard-monitor-base-info-tip {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #808695;
    }
    .demo-box{
        display: flex;
        justify-content: flex-start;
    }
    .demo-spin-container {
        position: relative;
    }
</style>